<template>
  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="商品名称">
      <a-input v-model="form.goodName" />
    </a-form-model-item>
    <a-form-model-item label="商品图片上传">
      <a-upload
        :headers="headers"
        name="file"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        :action="uploadUrl"
        :beforeUpload="beforeUpload"
        @change="handleChange"
      >
        <img v-if="form.imgUrl" :src="form.imgUrl" alt="avatar" />
        <div v-else>
          <a-icon :type="loading ? 'loading' : 'plus'" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
    </a-form-model-item>
    <a-form-model-item label="规格" v-model="form.coffeeType">
      <div class="specification">
        <div
          class="specificationItem"
          v-for="item in form.specslist"
          :key="item"
        >
          {{ item }}
          <!-- <a-icon class="close" type="close-circle" theme="filled" /> -->
        </div>
      </div>
      <!-- <a-button class="specification"> 选项 </a-button> -->
    </a-form-model-item>
    <a-form-model-item label="糖度" v-model="form.sugarType">
      <div class="specification">
        <div
          class="specificationItem"
          v-for="item in form.sugalist"
          :key="item"
        >
          {{ item }}
          <!-- <a-icon class="close" type="close-circle" theme="filled" /> -->
        </div>
      </div>
      <!-- <a-button class="specification"> 选项 </a-button> -->
    </a-form-model-item>
    <a-form-model-item label="商品价格">
      <a-input-number v-model="form.price" :min="0.1" :max="999" />
    </a-form-model-item>
    <a-form-model-item label="是否上架">
      <a-switch v-model="form.status" />
    </a-form-model-item>
    <a-form-model-item label="商品描述">
      <a-input v-model="form.describeInfo" type="textarea" />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import helper from "@/helper/helper";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "Form",
  props: {
    editData: { type: Object }, //编辑条数据
    editType: { type: String, default: "1" }, //1新增 2修改
  },
  watch: {
    editType: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    },
  },
  data() {
    return {
      headers: {
        authorization: helper.getToken(),
      },
      uploadUrl: process.env.VUE_APP_API_PREFIX + "/coffeeGood/uploadByMinio",
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {
        goodName: "",
        imgUrl: "",
        specslist: [],
        sugalist: [],
        price: "5",
        describeInfo: "",
        type: "coffee", //商品类型 咖啡：coffee
        status: true, //商品状态 0：上价 1：下架
      },
      loading: false,
    };
  },
  mounted() {
    if (this.editType === "1") {
      Object.keys(this.form).map((key) => {
        this.form[key] = "";
        this.form.specslist = ["冷", "热"];
        this.form.sugalist = ["标准糖", "少糖", "无糖"];
        this.form.type = "coffee";
        this.form.status = true;
      });
    } else if (this.editType === "2") {
      console.log(this.editData, "222");
      Object.keys(this.form).map((key) => {
        this.form[key] = this.editData[key];
      });
      this.form.status = this.editData.status === "0" ? true : false;
    }
  },
  methods: {
    handleSubmit() {
      console.log("submit:", this.form);
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      console.log("beforeUpload:", info.file.status);
      if (info.file.status === "done") {
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.loading = false;
        });
        if (info.file.response.code === 200) {
          this.form.imgUrl = info.file.response.msg;
        }
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.specification {
  display: flex;
  line-height: 40px;
}
.specificationItem {
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  width: 56px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 8px;
}
.close {
  position: absolute;
  color: #004b8d;
  top: -6px;
}
</style>
